<template>

  <div style="margin-top: -16px">
    <a-card :bordered="false" :bodyStyle="tstyle">
      <div class="table-page-search-wrapper" v-if="hasPerm('relation:page')">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="关系名称">
                <a-input v-model="queryParam.relationName" allow-clear placeholder="请输入关系名称" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <s-table
      ref="table"
      :enable-drag="true"
      :scroll="{x:'true'}"
      :columns="ruleTypeInt===1?columns:parseRulecolumns"
      :data="loadData"
      style="padding: 20px;margin-top: 10px"
      :alert="true"
      :rowKey="(record) => record.id"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template class="table-operator" slot="operator">
        <a-button @click="open" type="primary" icon="plus">添加
        </a-button>
      </template>
      <span slot="featurescopedSlots" slot-scope="text">
        {{ 'relation_feature' | dictType(text) }}
      </span>
      <span slot="typescopedSlots" slot-scope="text">
        {{ 'relation_type' | dictType(text) }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a v-if="hasPerm('relation:edit')" @click="editWithType(record)">编辑</a>
        <a-divider type="vertical" v-if="hasPerm('relation:edit') & hasPerm('relation:delete')" />
        <a-popconfirm
          v-if="hasPerm('relation:delete')"
          placement="topRight"
          title="确认删除？"
          @confirm="() => ruleDelete(record)">
          <a>删除</a>
        </a-popconfirm>
      </span>
    </s-table>
    <add-edit-rule-form ref="addEditRuleForm" @ok="handleOk"></add-edit-rule-form>
    <add-edit-parse-rule-form @ok="handleOk" ref="addEditParseRuleForm"></add-edit-parse-rule-form>
  </div>
</template>

<script>
import { relationRuleDelete, relationRulePage } from '@/api/modular/main/knowl/relation/relationManage'
import { STable } from '@/components'
import addEditRuleForm from '../rule/addEditRuleForm'
import addEditParseRuleForm from '../rule/addEditParseRuleForm'

export default {
  components: {
    STable,
    addEditRuleForm,
    addEditParseRuleForm
  },
  props: {
    ruleType: {
      type: String,
      required: true
    },
    ruleTypeInt: {
      type: Number,
      required: true
    }
  },
  created() {
    if (this.hasPerm('relation:edit') || this.hasPerm('relation:delete')) {
      const operator = {
        title: '操作',
        width: '220px',
        align: 'center',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      }
      if (this.ruleTypeInt === 1) {
        this.columns.push(operator)
      } else {
        this.parseRulecolumns.push(operator)
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.table.refresh()
    },
    editWithType(record) {
      switch (this.ruleTypeInt) {
        case 1:
          this.$refs.addEditRuleForm.edit(record)
          break
        case 2:
          this.$refs.addEditParseRuleForm.edit(record)
          break
      }
    },
    open() {
      switch (this.ruleTypeInt) {
        case 1:
          this.$refs.addEditRuleForm.add()
          break
        case 2:
          this.$refs.addEditParseRuleForm.add()
          break
      }
    },
    ruleDelete(item) {
      this.confirmLoading = true
      relationRuleDelete({
        id: item.id,
        ruleType: this.ruleType
      })
        .then((res) => {
          if (res.success) {
            this.$refs.table.refresh()
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    }
  },
  data() {
    return {
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      loading: false,
      currentType: 0,
      selectedRowKeys: [],
      selectedRows: [],
      queryParam: {
        ruleType: this.ruleType
      },
      labelCustomStyle: {
        style: {
          'white-space': 'nowrap',
          'overflow': 'hidden',
          'text-overflow': 'ellipsis'
        }
      },
      // 表头
      columns: [
        {
          title: '关系名称',
          align: 'center',
          minWidth: 200,
          width: 200,
          drag: true,
          ellipsis: true,
          dataIndex: 'relationName',
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '属性',
          align: 'center',
          dataIndex: 'propertyAName',
          minWidth: 150,
          width: 150,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '概念A',
          align: 'center',
          dataIndex: 'conceptAName',
          minWidth: 150,
          width: 150,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '属性',
          align: 'center',
          dataIndex: 'propertyBName',
          minWidth: 150,
          width: 150,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '概念B',
          align: 'center',
          minWidth: 130,
          width: 130,
          drag: true,
          ellipsis: true,
          dataIndex: 'conceptBName',
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '策略',
          minWidth: 100,
          width: 100,
          drag: true,
          ellipsis: true,
          align: 'center',
          dataIndex: 'strategyType',
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '关联表名',
          align: 'center',
          dataIndex: 'tableName',
          minWidth: 100,
          width: 100,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        }
      ],
      parseRulecolumns: [
        {
          title: '关系名称',
          align: 'center',
          minWidth: 200,
          width: 200,
          drag: true,
          ellipsis: true,
          dataIndex: 'relationName',
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '属性',
          align: 'center',
          dataIndex: 'propertyAName',
          minWidth: 120,
          width: 120,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '规则',
          align: 'center',
          dataIndex: 'propARuleType',
          minWidth: 100,
          width: 100,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '概念A',
          align: 'center',
          dataIndex: 'conceptAName',
          minWidth: 120,
          width: 120,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '属性',
          align: 'center',
          dataIndex: 'propertyBName',
          minWidth: 120,
          width: 120,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '规则',
          align: 'center',
          dataIndex: 'propBRuleType',
          minWidth: 100,
          width: 100,
          drag: true,
          ellipsis: true,
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '概念B',
          align: 'center',
          minWidth: 120,
          width: 120,
          drag: true,
          ellipsis: true,
          dataIndex: 'conceptBName',
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        },
        {
          title: '策略',
          minWidth: 100,
          width: 100,
          drag: true,
          ellipsis: true,
          align: 'center',
          dataIndex: 'strategyType',
          customCell: (record, rowIndex) => {
            return this.labelCustomStyle
          }
        }
      ],
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return relationRulePage(Object.assign(parameter, this.queryParam)).then((res) => {
          return res.data
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
